<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core">

<f:view>
	<h:head>
	
		<script type="text/javascript"
			src="${facesContext.externalContext.requestContextPath}/views/scripts/jquery.js"></script>

		<link
			href="${facesContext.externalContext.requestContextPath}/views/css/home1.css"
			media="screen" rel="stylesheet" type="text/css" />
		<link
			href="${facesContext.externalContext.requestContextPath}/views/css/app.css"
			media="screen" rel="stylesheet" type="text/css" />
		<link
			href="${facesContext.externalContext.requestContextPath}/views/css/reset.css"
			media="screen" rel="stylesheet" type="text/css" />
		<link
			href="${facesContext.externalContext.requestContextPath}/views/css/text.css"
			media="screen" rel="stylesheet" type="text/css" />
			
			
		
		<script type="text/javascript">
			$(document).ready(function() {
				
				$(".shadow_thumb_tiny").each(function() {
				    var icon_alt = $(this).attr("alt");
				    if(icon_alt == null || icon_alt.length == 0)
				    {
				    	//alert($(this).attr("alt"));	
				    	var src = $(this).attr("src") + "no_photo.png";
				    	icon_alt = "no_photo.png";
				    	$(this).attr("src", src);
				    	$(this).attr("alt", icon_alt);
				    }
				});
			});
		</script>
	</h:head>
	<h:body class="non_team">
		<ui:include src="../header.xhtml" />
		<br />
		<br />
		<br />
		<h:form>
		
		<div id="main" class="container_12">
			<div class="grid_12">

				<div class="grid_8 alpha">
					<div id="content">

						<h1 id="h1">
							<span></span>My Teams
						</h1>
						<div class="button-group">
							<a href="/users/4844123-fan-jin/teams"
								class="button pill icon home active"
								title="View a list of all your memberships.">My Teams
							</a> 
							<a
								href="/users/4844123-fan-jin/calendar"
								class="button pill icon calendar-icon "
								title="See your upcoming availability across all memberships.">Your
								Availability
							</a> 
							<a href="/users/4844123-fan-jin/activities"
								class="button pill icon log "
								title="View recent activity across all your memberships.">News
								Feed</a> 
							<a href="/teams/new" class="button pill icon add "
								title="Manage your own team? Click here to get it setup.">Create
								Team
							</a>

						</div>

						<div id="memberships_container">

							<table id="table" class="gradient-style">
								<thead>
									<tr>
										<th style="width: 193px; text-align: left;">Team</th>

										<th style="width: 193px; text-align: left;">Organiser/Sport/Location</th>
										<th style="width: 193px; text-align: left;">Next Event</th>

									</tr>
								</thead>
								<tbody>
									<ui:repeat value="#{myTeamBean.myTeams}" var="team">
										<tr class="odd">
											<td style="padding-top: 15px;">
												<span class="tiny_avatar">
													<h:commandLink title="View #{team.name}'s teampage as member #{myTeamBean.member.firstname} #{myTeamBean.member.lastname}" action="#{myTeamBean.goToTeamPageAction}">
														<img alt="#{team.icon}" class="shadow_thumb_tiny" 
																src="${facesContext.externalContext.requestContextPath}/views/images/team_icons/#{team.icon}" />
													
													</h:commandLink>
												</span>
												
												<span class="profile_link">
													<h:commandLink value="#{team.name}" title="View #{team.name}'s teampage as member #{myTeamBean.member.firstname} #{myTeamBean.member.lastname}" action="#{myTeamBean.goToTeamPageAction}"></h:commandLink>
												</span>
												<br /> 
												<strong>(as #{myTeamBean.member.firstname} #{myTeamBean.member.lastname})</strong>
											</td>

										<td>
											<h:commandLink title="View #{memberService.getMember(team.initiator).firstname} #{memberService.getMember(team.initiator).lastname}'s profile"
														   value="#{memberService.getMember(team.initiator).firstname} #{memberService.getMember(team.initiator).lastname}"
														   action="#{myTeamBean.goToUserProfilePageAction}">
												<f:setPropertyActionListener target="#{userProfileBean.memberEmail}" value="#{team.initiator}" />		
												<f:setPropertyActionListener target="#{userProfileBean.teamId}" value="#{team.id}" />		   
											</h:commandLink>
											<br /> 
											<strong>#{team.sport}</strong><br />
											<small>#{team.city}, #{team.state}, #{team.country}</small>
										</td>
										<td>(no upcoming events) <br />

										</td>
										
										
										</tr>
									</ui:repeat>


								</tbody>
							</table>
						</div>


					</div>
				</div>
			</div>
		</div>
		</h:form>
		<ui:include src="../footer.xhtml" />

	</h:body>
</f:view>
</html>